<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>排行榜详情</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app">
        <div class="nav">
            <ul class="w clearfix">
                <li><a href="home.html">首页</a></li>
                <li><a href="index.html">音乐排行榜</a></li>
                <li><a href="search.html">音乐搜索</a></li>
            </ul>
        </div>
        <div class="container w">
            <ul>
                <li v-if="music.songLink">
                    <div class="content">
                        <div class="cover">
                            <img :src="music.songPicRadio" alt="" class="album rotate">
                        </div>
                        <div class="cnt-r">
                            <h3>{{music.songName}}</h3>
                            <audio autoplay :src="music.songLink" controls ref="audio"></audio>
                        </div>
                    </div>
                </li>
                <li v-for="item in list" :key="item.sid" >
                        
                        <div class="content">
                            <div class="cover"> 
                                <img :src="item.pic_radio" alt="" class="album">
                            </div>
                            <!--  :style="{background:'url('+item.pic_radio+') no-repeat center'}" -->
                            <div class="cnt-r">
                                <h3>{{item.title}}</h3>
                                <div class="pos-r-t btn-play"  @click="play(item.song_id)">
                                </div>
                                <p class="desc">
                                    {{item.comment}}
                                </p>
                                <p>
                                    歌手: {{item.author}}
                                </p>
                                <p>
                                    发行时间: {{item.publishtime}}
                                </p>
                                <p class="desc">
                                    地区: {{item.country}}
                                </p>
                                <p>
                                    热度: ({{item.hot}})
                                </p>
                                <p>
                                    语言: {{item.language}}
                                </p>
                                <p>
                                    发行公司: {{item.si_proxycompany}}
                                </p>
                            </div>
                        </div>
                    </li>
            </ul>
        </div>
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            keyowrds:'',
            list:[],
            music:{},
            domain:'http://www.duans.top'
        },
        methods:{
            link(id){
                location.href=`detail.html#id=${id}`
            },
            play(id){
                this.$http.get(`${this.domain}/freeApi/broadcasting.php?act=musicDetails&id=${id}`).then((res)=>{
                    console.log(res);
                    if(res.status==200){
                        if(res.body.result.songList.length>0){
                            this.music=res.body.result.songList[0];
                            // console.log(this.$refs);
                        }else{
                            alert('接口错误!!!');
                        }
                        
                    }
                    console.log(this.music);
                });  
            },
           
        },
        //生命周期函数
        created:function(){
            var hash=location.hash;
            if(!hash){
                alert('参数错误!!!');
                location.href="home.html"
            }
            let type=hash.substr(1).split('=')[1];
            this.$http.get(`${this.domain}/freeApi/music.php?act=musicRankingsDetails&type=${type}`).then((res)=>{
                // console.log(res);
                if(res.status==200){
                    this.list=res.body.result;
                }
                console.log(this.list);
            }); 
        }
    });
</script>
</html>